<template>
    <div class="allNews-wrapper">
        <div class="allnews-frame">
            <div class="news-tab">
                <div :class="{active:isNews=='0'}" @click="changeTab('0')">我的通知<span v-if="unreadmesNum!=0 && unreadmesNum < 99">{{unreadmesNum}}</span>
                  <span v-else-if="unreadmesNum==99">{{unreadmesNum}}</span>
                  <span v-else-if="unreadmesNum > 99">...</span>
                    </div>
                <div :class="{active:isNews=='1'}" @click="changeTab('1')">我的私信<span v-if="unreadletterNum!=0 && unreadletterNum < 99">{{unreadletterNum}}</span>
                  <span v-else-if="unreadletterNum==99">{{unreadletterNum}}</span>
                  <span v-else-if="unreadletterNum > 99">...</span></div>
            </div>
            <div class="news-content">
                <my-notify name="myNotify" v-if="isNews=='0'">我的通知</my-notify>
                <my-privateletter name="myPrivateletter" v-if="isNews=='1'">我的私信</my-privateletter>
            </div>
        </div>
    </div>
</template>
<script>
import myNotify from './myNotify.vue'
import myPrivateletter from './myPrivateletter.vue'
import { mapGetters} from 'vuex'
import * as opreate from 'api/getData'
export default {
    data(){
        return{
            unreadmesNum:'',
            unreadletterNum:''
        }
    },
    components:{
        myNotify,
        myPrivateletter
    },
    computed:{
        isNews() {
            return this.$route.query.flag;
        },
        ...mapGetters([
        'currentUser',
        'unreadNumber',
        'unreadlsNumber'
        ])
    },
    mounted(){
        this.getmesNumber()
        this.getPrivateletterList()
    },
    watch:{
        unreadNumber(newVal,oldVal){
            // console.log(newVal)
            if(newVal){
                this.unreadmesNum=newVal
            }else{
                this.unreadmesNum=this.unreadNumber
            }
        },
        unreadlsNumber(newVal,oldVal){
            if(newVal){
                this.unreadletterNum=newVal
            }else{
                this.unreadletterNum=this.unreadlsNumber
            }
        }
    },
    methods:{
        changeTab(isNews) {
            this.$router.replace({
                path: '/allNews',
                query: 
                {
                    flag: isNews
                }
            })
        },
        getmesNumber(){
            // this.unreadmesNum=this.unreadNumber
            // this.unreadletterNum=this.unreadlsNumber
        },
        getPrivateletterList(){
            opreate.findGmessageList(1,10,this.currentUser.account,'',1).then(res=>{
                this.unreadletterNum=res.data.unreadNumber
            })
        }
    }
}
</script>
<style lang="stylus" scoped>
.allNews-wrapper
  background:#f5f5f5;
  width:100%;
  padding: 40px 0 0 0;
  .allnews-frame
    width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    .news-tab
      display: inline-block;
      width: 100%;
      height: 64px;
      border-bottom: 1px solid #eee;
      font-size:18px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(118,118,118,1);
      line-height:62px
      >div
        float:left; 
        margin-left:79px;
        position:relative;
        font-family: MicrosoftYaHei-Bold;
        font-size: 18px;
        font-weight:400;
        color:rgba(118,118,118,1);
        &.active
          border-bottom:2px solid #FF6252;
          color:rgba(255,98,82,1);
          font-weight: bold;
        &:hover
          border-bottom:2px solid #FF6252;
          color:rgba(255,98,82,1);  
        &:first-child
          margin-left:40px
        span
          position:absolute;
          z-index:999;
          width:20px;
          height:20px;
          background:rgba(255,98,82,1);
          border-radius:50%;
          text-align:center;
          line-height:20px;
          font-size:12px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(255,255,255,1);
          top: 10px;
          margin-left: 2px;


</style>


